<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
const teas = [
  { id: 1, name: '龙井绿茶', price: 39.99, img: '/src/assets/tea/longjing.jpg' },
  { id: 2, name: '西湖龙井', price: 49.99, img: '/src/assets/tea/xihulongjing.jpg' },
  { id: 3, name: '碧螺春', price: 29.99, img: '/src/assets/tea/biluochun.jpg' },
  { id: 4, name: '普洱茶', price: 59.99, img: '/src/assets/tea/puer.jpg' },
  { id: 5, name: '铁观音', price: 45.99, img: '/src/assets/tea/tieguanyin.jpg' },
  { id: 6, name: '祁门红茶', price: 35.99, img: '/src/assets/tea/qimenhong.jpg' },
  { id: 7, name: '白毫银针', price: 55.99, img: '/src/assets/tea/baihaoyinzhen.jpg' },
  { id: 8, name: '君山黄茶', price: 42.99, img: '/src/assets/tea/junshanhuang.jpg' },
  { id: 9, name: '茉莉花茶', price: 28.99, img: '/src/assets/tea/molihuacha.jpg' },
  { id: 10, name: '安化黑茶', price: 38.99, img: '/src/assets/tea/anhuheicha.jpg' }
];
const visibleCount = 5;
const startIndex = ref(0);
let timer: any = null;
const searchText = ref('');
const showTeas = () => {
  const result = [];
  for (let i = 0; i < visibleCount; i++) {
    result.push(teas[(startIndex.value + i) % teas.length]);
  }
  return result;
};
const moveLeft = () => {
  startIndex.value = (startIndex.value - 1 + teas.length) % teas.length;
};
const moveRight = () => {
  startIndex.value = (startIndex.value + 1) % teas.length;
};
const startAutoScroll = () => {
  if (!timer) {
    timer = setInterval(() => {
      moveRight();
    }, 2500);
  }
};
const stopAutoScroll = () => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
};
const doSearch = () => {
  if (searchText.value.trim()) {
    // 跳转到商品列表并带上搜索关键字
    window.location.href = `/tea?keyword=${encodeURIComponent(searchText.value)}`;
  }
};
onMounted(startAutoScroll);
onUnmounted(stopAutoScroll);
</script>

<template>
  <div class="main-bg">
    <header class="header">
      <div class="logo">FirstTea商城</div>
      <div class="search-box">
        <input
          v-model="searchText"
          placeholder="搜索商品/茶叶..."
          @keyup.enter="doSearch"
        />
        <button @click="doSearch">搜索</button>
      </div>
      <div class="user-menu">
        <router-link to="/user">个人中心</router-link>
        <router-link to="/cart">购物车</router-link>
      </div>
    </header>
    <nav class="nav-bar">
      <router-link to="/">首页</router-link>
      <router-link to="/cart">购物车</router-link>
      <router-link to="/orders">订单</router-link>
      <router-link to="/user">用户中心</router-link>
      <router-link to="/comments">评论</router-link>
      <router-link to="/login">登录</router-link>
      <router-link to="/register">注册</router-link>
    </nav>
    <main>
      <div v-if="$route.path === '/'" class="home-recommend">
  <!-- 轮播区已去除示例图片，可在此插入茶叶宣传图或广告图 -->
        <div class="recommend-section">
          <h2>热销推荐</h2>
          <div class="recommend-list"
            @mouseenter="stopAutoScroll"
            @mouseleave="startAutoScroll"
          >
            <button class="carousel-btn left"
              @click="moveLeft"
              @mouseenter="stopAutoScroll"
              @mouseleave="startAutoScroll"
            >&#9664;</button>
            <router-link v-for="tea in showTeas()" :key="tea.id" :to="`/tea/${tea.id}`" class="recommend-card">
              <img :src="tea.img" :alt="tea.name"
                @mouseenter="stopAutoScroll"
                @mouseleave="startAutoScroll"
              />
              <div class="card-info">
                <div class="card-title">{{ tea.name }}</div>
                <div class="card-price">¥{{ tea.price }}</div>
              </div>
            </router-link>
            <button class="carousel-btn right"
              @click="moveRight"
              @mouseenter="stopAutoScroll"
              @mouseleave="startAutoScroll"
            >&#9654;</button>
          </div>
        </div>
      </div>
      <router-view />
    </main>
  </div>
</template>

<style scoped>
.carousel-btn {
  background: #ffecb3;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 22px;
  color: #ff6600;
  box-shadow: 0 2px 8px #ffd591;
  cursor: pointer;
  margin: 0 8px;
  transition: background 0.2s;
}
.carousel-btn:hover {
  background: #ffd591;
}
body, .main-bg {
  min-height: 100vh;
  background: linear-gradient(120deg, #fff7e6 0%, #ffe7ba 100%);
  font-family: 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Arial', sans-serif;
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: #fffbe6;
  box-shadow: 0 2px 8px #ffe7ba;
}
.logo {
  font-size: 28px;
  font-weight: bold;
  color: #ff6600;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-box input {
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #ffd591;
}
.search-box button {
  background: #ff6600;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
}
.user-menu {
  display: flex;
  gap: 16px;
}
.user-menu a {
  color: #ff6600;
  font-weight: 500;
  text-decoration: none;
}
.nav-bar {
  display: flex;
  gap: 24px;
  padding: 16px 0 12px 0;
  justify-content: center;
  background: #fff;
  box-shadow: 0 2px 8px #ffe7ba;
  border-radius: 0 0 16px 16px;
  margin-bottom: 24px;
}
.nav-bar a {
  color: #ff6600;
  text-decoration: none;
  font-weight: 500;
  font-size: 18px;
}
.home-recommend {
  max-width: 1200px;
  margin: 0 auto 32px auto;
}
.carousel {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
}
.carousel img {
  width: 320px;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 2px 8px #ffd591;
}
.recommend-section {
  margin-bottom: 32px;
}
.recommend-list {
  display: flex;
  gap: 24px;
}
.recommend-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fffbe6;
  border-radius: 12px;
  box-shadow: 0 2px 8px #ffd591;
  padding: 16px;
  width: 180px;
  text-decoration: none;
}
.recommend-card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
}
.card-info {
  text-align: center;
}
.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.card-price {
  color: #ff6600;
  font-size: 18px;
  font-weight: bold;
  margin-top: 4px;
}
}
.nav-bar a.router-link-exact-active {
  padding: 4px 12px;
  border-radius: 6px;
  background: #3b82f6;
  color: #fff;
  transition: background 0.2s, color 0.2s;
}
</style>
